<extend name="public@base5"/>
<block name="head">
    <style>
        html, body {
            padding: 0;
            height: 100%;
            margin: 0;
            overflow: hidden;
            background: #eee;
        }

        #simulator {
            margin: 0 auto;
            display: block;
        }

        #setting-iframe {
            width: 100%;
            height: 100%;
        }

        .setting-panel-wrap {
            position: fixed;
            left: 0;
            bottom: 0;
            top: 0;
            width: 420px;
            border-right: 1px solid #eee;
            display: none;
            background: #fff;
            z-index: 999;
        }

        #setting-iframe-wrap {
            position: absolute;
            top: 0;
            bottom: 50px;
            right: 0;
            left: 0;
        }

        .setting-panel-wrap .panel {
        }

        .setting-panel-wrap .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            border-top: 1px solid #eee;
            padding: 8px;
        }

        #close-setting-panel {
            position: absolute;
            top: 0;
            right: 3px;
            z-index: 99;
            font-size: 18px;
        }

        #update-theme-btn:focus {
            outline: none;
        }

        #think_page_trace {
            display: none !important;
        }

        #think_page_trace_open {
            display: none !important;
        }

        .simulator-pc {
            width: 100%;
            height: 100%;
        }

        .simulator-pad {
            width: 1180px;
            height: 820px;
            transform: scale(0.7);
            border: 1px solid #aaa;
        }

        .simulator-mobile {
            width: 375px;
            height: 667px;
            transform: scale(0.9);
            border: 1px solid #aaa;
        }

        .design-btn {
            position: fixed;
            z-index: 99;
            font-size: 20px;
            line-height: 50px;
            width: 50px;
            border: 1px solid #eee;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            background: #fff;
        }

        .design-btn:hover {
            background: #eee;
            border-color: #ddd;
        }

        #update-theme-btn {
            top: 30px;
            right: 30px;
        }

        #show-setting-panel {
            top: 100px;
            right: 30px;
        }

        #simulator-pc-btn {
            top: 170px;
            right: 30px;
        }

        #simulator-pad-btn {
            top: 240px;
            right: 30px;
        }

        #simulator-mobile-btn {
            top: 310px;
            right: 30px;
        }


    </style>
    <script>
        setInterval(function () {
            $.ajax({
                url: "{:url('Theme/design')}?theme={:input('param.theme')}&status=1",
                type: 'post'
            });
        }, 2000);
    </script>
</block>
<block name="main">
    <a class="design-btn" id="show-setting-panel" title="{:lang('Edit current page')}" data-toggle="tooltip">
        <i class="fa fa-pencil"></i>
    </a>
    <a class="design-btn" id="update-theme-btn" title="{:lang('Refresh current page')}" data-toggle="tooltip">
        <i class="fa fa-refresh"></i>
    </a>
    <a class="design-btn" id="simulator-mobile-btn" title="{:lang('MOBILE')}" data-toggle="tooltip">
        <i class="fa fa-mobile"></i>
    </a>
    <a class="design-btn" id="simulator-pad-btn" title="Pad" data-toggle="tooltip"><i class="fa fa-tablet"></i></a>
    <a class="design-btn" id="simulator-pc-btn" title="PC" data-toggle="tooltip"><i class="fa fa-desktop"></i></a>

    <div class="setting-panel-wrap">
        <a href="javascript:;" id="close-setting-panel"><i class="fa fa-close"></i></a>
        <div id="setting-iframe-wrap">
            <iframe frameborder="0" id="setting-iframe"></iframe>
        </div>
        <div class="footer text-center">
            <a id="save-btn" class="btn btn-primary">
                <i class="fa fa-save fa-fw"></i> {:lang('SAVE')}
            </a>
        </div>
    </div>
    <iframe src="__ROOT__/?_design_theme={:input('param.theme')}" frameborder="0" id="simulator"
            class="simulator-pc"></iframe>
</block>
<block name="scripts">
    <script>
        var simulator = $('#simulator').get(0).contentWindow;
        var $simulator = $(simulator);
        var $settingIframe = $('#setting-iframe');
        var simulatorNeedRefresh = true;

        $('#update-theme-btn').click(function () {
            simulator.location.reload(true);
        });

        $('#simulator-pc-btn').click(function () {
            $('#simulator').attr('class', '').addClass('simulator-pc');
        });

        $('#simulator-pad-btn').click(function () {
            $('#simulator').attr('class', '').addClass('simulator-pad');
        });

        $('#simulator-mobile-btn').click(function () {
            $('#simulator').attr('class', '');
            $('#simulator').addClass('simulator-mobile');
        });

        $('#save-btn').click(function () {
            $settingIframe.get(0).contentWindow.confirm();
        });

        $('#close-setting-panel').click(function () {
            hideSettingPanel();
        });

        $('#show-setting-panel').click(function () {
            showSettingPanel();
        });

        function hideSettingPanel() {
            $('.setting-panel-wrap').fadeOut(function () {
                $('#show-setting-panel').show();
            });
        }

        function showSettingPanel() {
            $('.setting-panel-wrap').fadeIn();
            // $('#show-setting-panel').hide();
        }

        function showDesignBtn() {
            if (!$('.setting-panel-wrap').is(':visible')) {
                $('#show-setting-panel').show();
            }

        }

        function hideDesignBtn() {
            $('.setting-panel-wrap').hide();
            $('#show-setting-panel').hide();
        }

        function settingIframeRefresh() {
            $settingIframe.attr('src', "{:url('Theme/fileSetting')}?theme={:input('param.theme')}&file=" + encodeURIComponent(simulator._themeFile));
        }


        function simulatorRefresh() {
            if (simulatorNeedRefresh) {
                settingIframeRefresh();
                $simulator.load(function () {
                    $(simulator.document).on('click', 'a', function () {
                        var target = $(this).attr('target');
                        var href = $(this).attr('href');
                        if (target == '_blank' && href.indexOf('http') < 0) {
                            simulator.location.href = href;
                            return false;
                        }
                    });
                });
            }

            simulatorNeedRefresh = true;
        }

        function afterSaveSetting() {
            simulatorNeedRefresh = false;
            simulator.location.reload();
        }

    </script>
</block>